<template>
  <div>
    <!-- 公众号设置 -->
    <el-col :span="24" class="views-wechat-menu">

      <el-col :span="24">
        <el-col :span="5" class="menu-left">
          <img class="img-phone" src="@/assets/iphone_backImg.png">
          <!--<img class="bottom" :src="bottom" />-->
          <div class="textbot">
            <div class="menu-item" v-for="(item,indx) in list" :key="indx" >

              <div v-if="activeClass == indx">
                <div class="tianjia">
                  <div class="menu-item-children" v-for="(item,index) in item.children" :key="index"
                       :class="addindex == index  ? 'active':''" @click="gettem(item,index)">{{item.name}}</div>
                  <div class="add" @click="add(indx)" v-if="(list[indx].children).length<=4">
                    <i class="el-icon-plus"></i>
                    <div class="arrow"></div>
                  </div>
                  <div class="arrow" v-else></div>
                </div>
              </div>
              <div class="text" :class="activeClass == indx ? 'active':''" @click="getItem(item,indx)">{{item.name}}</div>
            </div>
            <div class="menu-item" v-if="list.length < 3">
              <div class="text" @click="addtext"><i class="el-icon-plus"></i></div>
            </div>
          </div>
        </el-col>



        <el-col :span="15" class="module-content">
          <el-card class="box-card right">
            <div slot="header" class="clearfix">
              <span>{{input}}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="delet">删除子菜单</el-button>
            </div>
            <div style="display: flex;">
              <span class="item-label">菜单名称</span>
              <el-input v-model="input" placeholder="请输入内容" style="width:70%;" ></el-input>
            </div>
            <p class="input-tips">仅支持中英文和数字，字数不超过4个汉字或8个字母</p>
            <div style="display: flex;">
              <span class="item-label">菜单内容</span>
              <el-radio-group v-model="radio" class="item-radio">
                <el-radio :label="2">跳转的网页</el-radio>
              </el-radio-group>
            </div>
            <div class="module-radio-content" v-if="radio == 2">
              <p class="link-tips">订阅者点击该子菜单会跳到以下链接</p>
              <div class="link-input">
                <span class="item-label">页面地址</span>
                <el-input v-model="inputhttp" placeholder="请输入内容" style="width:70%;"></el-input>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="module-button">
          <el-button type="primary">保存并发布</el-button>
        </el-col>
      </el-col>
    </el-col>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        previewimg: '@/assets/iphone_backImg.png',
        previewtext: 0,
        top: '@/assets/iphone_backImg.png',
        bottom: '../static/img/bottom.png',
        activeClass: 0,
        addindex: -1,
        input: '',
        inputhttp: '',
        radio: 1,
        radiobottom: 0,
        shu: 6,
        id: 1,
        list: [
          { name: '菜单一', http: 'https://www.baidu.com/', id: 1, children: [{ 'name': '我是1', http: 'https://www.baidu.com/', id: 4 }] },
          { name: '菜单二', http: 'https://www.baidu.com/', id: 2, children: [{ 'name': '我是2', http: 'https://www.baidu.com/', id: 5 }] },
          { name: '菜单三', http: 'https://www.baidu.com/', id: 3, children: [{ 'name': '我是3', http: 'https://www.baidu.com/', id: 6 }] }
        ],
      }
    },
    mounted () {
      this.input = this.list[0].name
      this.inputhttp = this.list[0].http
    },
    watch: {
      // 如果 `input` 发生改变，这个函数就会运行
      input: function () {
        for (var i = 0; i < this.list.length; i++) {
          for (var j = 0; j < this.list[i].children.length; j++) {
            if (this.list[i].children[j].id === this.id) {
              this.list[i].children[j].name = this.input
            }
          }
          if (this.list[i].id === this.id) {
            this.list[i].name = this.input
          }
        }
        // 限制名字个数
        var temp = 0
        for (var k = 0; k < this.input.length; k++) {
          if (/[\u4e00-\u9fa5]/.test(this.input[k])) {
            temp += 2
          } else {
            temp++
          }
          if (temp > 16) {
            this.input = this.input.substr(0, k)
            this.$message({
              message: '仅支持中英文和数字，字数不超过8个汉字或16个字母',
              type: 'warning'
            })
          }
        }
      },
      inputhttp: function () {
        for (var i = 0; i < this.list.length; i++) {
          for (var j = 0; j < this.list[i].children.length; j++) {
            if (this.list[i].children[j].id === this.id) {
              this.list[i].children[j].http = this.inputhttp
            }
          }
          if (this.list[i].id === this.id) {
            this.list[i].http = this.inputhttp
          }
        }
      }
    },
    methods: {
      preview (item, index) {
        this.previewtext = index
      },
      //   父元素
      getItem (item, index) {
        this.addindex = -1
        this.activeClass = index  // 把当前点击元素的index，赋值给activeClass
        this.input = item.name
        this.inputhttp = item.http
        this.id = item.id
      },
      // 子元素
      gettem (item, index) {
        this.addindex = index
        console.log(item)
        this.input = item.name
        this.inputhttp = item.http
        this.id = item.id
      },
      // 增加
      add (index) {
        this.shu++

        if(this.list[index].children.length>=5){
          return false;
        }
        this.list[index].children.push({
          'name': '子菜单名称',id: this.shu
        })
      },
      addtext () {
        this.shu++
        this.list.push({
          'name': '菜单', http: 'https://www.baidu.com/', id: this.shu, children: []
        })
      },
      // 删除
      delet () {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (var i = 0; i < this.list.length; i++) {
          for (var j = 0; j < this.list[i].children.length; j++) {
            if (this.list[i].children[j].id === this.id) {
              this.list[i].children.splice(j, 1)
              this.addindex = -1
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          }
          if (this.list[i].id === this.id) {
            this.list.splice(i, 1)
            this.activeClass = -1
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        }
      }).catch(() => {
          this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      },
    }
  }
</script>



<style lang="scss" scoped>

  .views-wechat-menu{
    padding:32px 40px 0;
  }
  .flex{
    position: fixed;
    background: #000000;
    opacity: 0.5;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
  }



  .preview{
    position: fixed;
    top: 15%;
    left: 45%;
    z-index: 99;
  }
  .previewcon{
    position: relative;
  }
  .previewtextbot {
    position: absolute;
    bottom: 93px;
    left: 65px;
    width: 100%;
  }
  .previewtext{
    height: 36px;
    display: block;
    text-decoration:none; //去掉默认下滑线
  color:#999; //设置默认颜色
  }
  .previewli {
    float: left;
    width: 78px;
    line-height: 36px;
    border: 1px solid #E7E7EB;
    background: #FAFAFA;
    text-align: center;
    cursor: pointer;
    color: #999;
    position: relative;
  }
  .previewlione{
    width: 233px !important;
  }
  .previewlitwo{
    width: 117px !important;
  }
  .previewtianjia {
    position: absolute;
    bottom: 55px;
    width: 100%;
    line-height: 36px;
    background: #FAFAFA;
  }



  .previewmenu-item-children {
    width: 100%;
    line-height: 36px;
    border: 1px solid #E7E7EB;
    background: #fff;
    height: 36px;
    display: block;
    text-decoration:none; //去掉默认下滑线
  color:#999; //设置默认颜色
  }
  .previewarrow{
    position: absolute;
    bottom: -15px;
    left: 44%;
    /* 圆角的位置需要细心调试哦 */
    width: 0;
    height: 0;
    font-size: 0;
    border: solid 8px;
    border-color:#fff #E6E6E6 #E6E6E6 #E6E6E6;
  }
  .warning {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 5px 20px;
  }



  .on {
    text-align: right;
    float: right;
    color: #1890ff;
  }



  .tips {
    color: #1890ff;
    font-size: 20px;
    margin-right: 10px;
  }



  .menu-left {
    /*background: #f5f5f5;*/
    width:354px;
     height: 570px;
    position: relative;
  }



  .top {
    position: absolute;
    top: 0px;
  }



  .bottom {
    position: absolute;
    bottom: 0px;
  }



  .textbot {
    position: absolute;
    bottom: 0px;
    left: 62px;
    width:270px;
  }



  .active {
    border: 1px solid #44B549 !important;
    color: #44B549 !important;
  }



  .menu-item {
    float: left;
    width: 90px;
    line-height: 48px;
    border: 1px solid #E7E7EB;
    background: #FAFAFA;
    text-align: center;
    cursor: pointer;
    color: #999;
    position: relative;
  }
  .text{
    height: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding:0 8px;
  }
  .text:hover {
    color: #000;
  }



  .add {
    width: 100%;
    line-height: 48px;
    border: 1px solid #E7E7EB;
    background: #FAFAFA;
  }
  .arrow {
    position: absolute;
    bottom: -16px;
    left: 36px;
    /* 圆角的位置需要细心调试哦 */
    width: 0;
    height: 0;
    font-size: 0;
    border: solid 8px;
    border-color:#E7E7EB transparent transparent transparent;
    &:after{
    content: '';
       position: absolute;
       left:-7px;
       top:-9px;
       width: 0;
       height: 0;
       font-size: 0;
       border: solid 7px;
       border-color:#FAFAFA transparent transparent transparent;
     }
  }
  .tianjia {
    position: absolute;
    bottom: 64px;
    width: 100%;
    line-height: 48px;
    background: #FAFAFA;
  }



  .menu-item-children {
    width: 100%;
    line-height: 48px;
    border: 1px solid #E7E7EB;
    background: #FAFAFA;
    height: 48px;
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding:0 4px;
  }



  .right {
    background: #F4F5F9;
    min-height: 648px;

  }

  .module-content{
    padding-left: 24px;
    .item-label{
      display: inline-block;
      vertical-align: middle;
      line-height: 40px; width:80px;
      font-size: 15px;
    }
    .input-tips{
      font-size: 14px;
      color: #999;
      padding-left: 80px;
    }
    .item-radio{
      .el-radio{
        line-height: 40px;
      }
    }
  .module-radio-content{
    background: #fff;
    padding:10px 40px 28px;
    border-radius: 4px;
    margin:6px 0 0;
    .link-tips{
      font-size: 14px;
      color: #999;
    }
    .item-label{
      width: 70px;
    }
  }
  }
  .module-button{
    text-align: center;
    padding:32px 0;
  }
  .img-phone{
    width: 356px;
  }
</style>
